<template>
  <div @touchstart="move">
<!--    头部-->
    <van-nav-bar
        title="搞笑段子"
        left-arrow
        @click-left="onClickLeft"
        :style="'background-image: url('+bcList[0]+'); background-repeat: no-repeat;background-size: cover;'"
    />
<!--    盒子-->
    <div class="box" :style="'background-image: url('+bcList[0]+');'">
      <div style="padding-bottom: 50px">
        <div class="titleBox animate__animated animate__bounceInDown">
          <EyeMove></EyeMove>
          <h3>开心时刻</h3>
          <EyeMove></EyeMove>
        </div>
        <p class="animate__animated animate__rollIn txt" v-html="list[0].content || defaultP"></p>
        <button @click="next">下一条</button>
      </div>

    </div>
  </div>
</template>

<script>
import {play1} from "@/api/api";

import bc1 from '../../assets/bc1.webp';
import bc2 from '../../assets/bc2.gif';
import bc3 from '../../assets/bc3.webp';
import bc4 from '../../assets/bc4.jpeg';
import bc5 from '../../assets/bc5.webp';
import bc6 from '../../assets/bc6.webp';
import bc8 from '../../assets/bc8.webp';
import EyeMove from "@/components/Play/EyeMove";

export default {
  name: "Play",
  data(){
    return{
      list:[{content:''}],
      bcList:[bc1,bc2,bc3,bc4,bc5,bc6,bc8],
      defaultP:'"‍‍儿子住校难得回家一次，回来说学校的饭菜难吃。 他妈妈急忙给他做了一大桌子菜。 儿子吃了两口对我说：“爸爸我带你去我们学校吃吧。” 老婆的脸立马黑了，儿子快跑吧，老爸也不能救你了，救了你我以后的日子不好过啊。‍‍‍‍'
    }
  },
  methods:{
    onClickLeft(){
      this.$router.go(-1)
    },
    move(){
      var eye = document.querySelectorAll(".eye");
      window.addEventListener('mousemove',function(event){
        eye.forEach(function(eye){
          let angle = Math.atan2(event.pageX-eye.getBoundingClientRect()
              .left-eye.clientLeft/2,event.pageY-eye.getBoundingClientRect().top
              -eye.clientTop/2);
          let rot = angle * 180 / Math.PI * -1 - 90 ;
          eye.style.transform = `rotate(${rot}deg)`;
        })
      })
    },
    next(){
      this.$router.go(0)
    }
  },
  components:{
    EyeMove
  },
  created() {
    play1().then(res=>{
      console.log(res)
      if(res.data.code == 1){
        this.list = res.data.data
        this.bcList.sort(function() {
          return Math.random()-0.5
        })
      }
    })
    // jiqiren().then(res=>{
    //   console.log(res)
    // })
  }
}
</script>
<style lang="less" scoped>
.box{
  width: 100vw;
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: calc(100vh - 46px);
  div{
    .titleBox{
      padding-top: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      h3{
        font-size: 30px;
        //padding-top: 20px;
        margin: 0 20px;
        text-align: center;
        background-image: linear-gradient(to right,#4D4DFF 0%, #5959AB 19%, #9932CD 42%, #7093DB 79%, #8F8FBD 100%);
        -webkit-background-clip: text;
        color: transparent;
      }
    }
    //height: 100%;
    //position: absolute;
    //top: 0;

    .txt {
      line-height: 45px;
      padding:30px;
      font-size: 20px;
      background-image: linear-gradient(to right,#4D4DFF 0%, #5959AB 19%, #00009C 42%, #7093DB 79%, #8F8FBD 100%);
      -webkit-background-clip: text;
      color: transparent;
    }
   button{
     width: 200px;
     height: 50px;
     background-image: linear-gradient(to right,#4D4DFF 0%, #5959AB 19%, #00009C 42%, #7093DB 79%, #8F8FBD 100%);
     -webkit-background-clip: text;
     color: transparent;
     border: 1px white dotted;
     font-size: 25px;
   }

  }
  EyeMove{
    //text-align: center;
    margin: auto;
  }

}


</style>